<template>
    <div id="basics-deploy">
        <el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="160px" :rules="rules">
            <el-row>
                <!-- <el-col v-if="preType === 'job'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="作业活动" prop="l_JobApplyId">
                        <el-select 
                            v-model="ruleForm.l_JobApplyId" 
                            filterable 
                            class="m-2" 
                            placeholder="选择作业活动" 
                            @change="jobChange"
                            value-key="id"
                            popper-class="set-select"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in jobOptions"
                                :key="item.id"
                                :label="item.v_JobContent"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col> -->
                <el-col v-if="preType === 'job'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="风险分析单元" prop="L_AnalysisUnitId">
                        <el-select 
                            v-model="ruleForm.L_AnalysisUnitId" 
                            filterable 
                            class="m-2" 
                            placeholder="选择风险分析单元" 
                            @change="analyseChange"
                            value-key="id"
                            popper-class="set-select"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in analyseOption"
                                :key="item.id"
                                :label="item.v_RiskPartitionName ? item.v_RiskPartitionName + '——' + item.v_Name : item.v_Name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col v-if="preType !== 'job'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检路线" prop="l_IPPathId">
                        <el-select 
                            v-model="ruleForm.l_IPPathId" 
                            filterable 
                            class="m-2" 
                            placeholder="选择巡检路线" 
                            @change="lineChange"
                            value-key="id"
                            popper-class="set-select"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in lineOptions"
                                :key="item.id"
                                :label="item.v_Name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="计划名称" prop="v_Name">
                        <el-input v-model="ruleForm.v_Name" placeholder="请输入计划名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="风险分区" prop="l_RiskPartitionId">
                        <el-select 
                            v-model="ruleForm.l_RiskPartitionId" 
                            filterable 
                            class="m-2" 
                            placeholder="选择风险分区" 
                            @change="zoneChange"
                            value-key="id"
                            popper-class="set-select"
                            :popper-append-to-body="false"
                        >
                            <el-option
                                v-for="item in zoneOptions"
                                :key="item.id"
                                :label="item.v_Name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="自动巡检分类" prop="n_IPClass">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择自动巡检分类" 
                            v-model="ruleForm.n_IPClass" 
                            :disabled="true"
                            @change="classChange"
                        >
                            <el-option
                                v-for="item in classOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检类型" prop="v_IPType">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择巡检类型" 
                            v-model="ruleForm.v_IPType" 
                        >
                            <el-option
                                v-for="item in typeOption"
                                :key="item.id"
                                :label="item.value"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检模式" prop="n_IPMode">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择巡检模式" 
                            v-model="ruleForm.n_IPMode" 
                            @change="modelChange"
                        >
                            <el-option
                                v-for="item in modelOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <template v-if="ruleForm.n_IPMode !== 0">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="巡检周期" prop="n_IPCycleVaule">
                            <el-input type="number" v-model="ruleForm.n_IPCycleVaule" placeholder="请输入巡检周期" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="巡检时间单位" prop="n_IPCycleUint">
                            <el-select 
                                filterable
                                class="m-2" 
                                placeholder="请选择巡检时间单位" 
                                v-model="ruleForm.n_IPCycleUint" 
                                @change="uintChange"
                            >
                                <el-option
                                    v-for="item in uintOption"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="开始日期" prop="d_StartDate">
                        <el-date-picker
                            v-model="ruleForm.d_StartDate"
                            type="date"
                            value-format="YYYY-MM-DD"
                            placeholder="请选择开始日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <template v-if="isShow">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="结束时间">
                            <el-radio-group v-model="staticField" @change="staticFieldChange">
                                <el-radio :label="1">无结束时间</el-radio>
                                <el-radio :label="2">
                                    重复
                                    <el-input 
                                        :disabled="inpDisabled" 
                                        v-model="ruleForm.n_RepetitionTimesEnd" 
                                        style="width: 50px; margin: 0 10px;" 
                                        type="number" 
                                    />
                                    次结束
                                </el-radio>
                                <el-radio style="margin-left: 80px;" :label="3">
                                    结束时间
                                    <el-date-picker
                                        :disabled="dataDisabled"
                                        style="margin-left: 10px;"
                                        type="date"
                                        v-model="ruleForm.d_EndDate"
                                        value-format="YYYY-MM-DD"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </template>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检开始时间" prop="d_StartTime">
                        <el-time-picker
                            v-model="ruleForm.d_StartTime"
                            value-format="HH:mm:ss"
                        />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检结束时间" prop="d_EndTime">
                        <el-time-picker
                            v-model="ruleForm.d_EndTime"
                            value-format="HH:mm:ss"
                        />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="工作日历" prop="n_WorkingCalendar">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择工作日历" 
                            v-model="ruleForm.n_WorkingCalendar" 
                            @change="calendarChange"
                        >
                            <el-option
                                v-for="item in calendarOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col v-if="preType !== 'job'" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="是否启动巡检路线顺序">
                        <el-switch
                            v-model="ruleForm.isUsedPathUnitOrder"
                            active-color="#07AAF9"
                            inactive-color="#FF5F33"
                            inline-prompt
                            active-text="启动"
                            inactive-text="不启动"
                        />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检提前时间">
                        <el-input type="number" v-model="ruleForm.n_AllowEarlyValue" placeholder="请输入巡检提前时间" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检提前时间单位">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择巡检提前时间单位" 
                            v-model="ruleForm.n_AllowEarlyUnit" 
                            @change="timeUnitChange"
                        >
                            <el-option
                                v-for="item in timeUnitOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检延后时间">
                        <el-input type="number" v-model="ruleForm.n_AllowDelayedValue" placeholder="请输入巡检延后时间" clearable />
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检延后时间单位">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择巡检延后时间单位" 
                            v-model="ruleForm.n_AllowDelayedUnit" 
                            @change="timeUnitChange"
                        >
                            <el-option
                                v-for="item in timeUnitOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                    <el-form-item label="巡检任务生成模式">
                        <el-select 
                            filterable
                            class="m-2" 
                            placeholder="请选择巡检任务生成模式" 
                            v-model="patternVal" 
                            @change="patternChange"
                            :disabled="isShow"
                        >
                            <el-option
                                v-for="item in patternOption"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , toRefs , watch , onMounted , nextTick } from 'vue';
import { ElCol,FormRules, ElForm, ElRow } from 'element-plus';
import { SMSIPPathList , SMSDCRiskPartitionList , sysDictDataList , SMSJOBApplyList, SMSDCAnalysisUnitList } from '/@/api/centerControl/sms';

/*** 定义接口基础数据类型 */
interface formType {
    ruleForm: ruleFormType,
}
/*** form 表单数据类型 */
type ruleFormType = {
    l_IPPathId: any, // 巡检路线Id
    v_Name: String, // 计划名称
    l_RiskPartitionId: any, // 风险分区Id
    // l_JobApplyId: any, // 作业申请Id
    n_IPClass: Number, // 自能巡检分类
    v_IPType: String, // 巡检类型
    n_IPMode: Number, // 巡检模式
    n_IPCycleVaule: Number, // 巡检周期
    n_IPCycleUint: Number, // 巡检时间单位
    d_StartDate: String, // 开始日期
    isAppointEndDate: any, // 是否有结束日期
    d_EndDate: String, // 指定结束日期
    n_RepetitionTimesEnd: any, // 重复几次结束
    d_StartTime: String, // 开始时间
    d_EndTime: String, // 结束时间
    n_WorkingCalendar: Number, // 工作日历类型
    isUsedPathUnitOrder: Boolean, // 是否启动巡检路线顺序
    // isUsedLocation: Boolean, // 是否启动巡检定位
    n_AllowEarlyValue: Number, // 巡检允许提前时间值
    n_AllowEarlyUnit: Number, // 巡检时间单位
    n_AllowDelayedValue: Number, // 巡检允许延后时间值
    n_AllowDelayedUnit: Number, // 巡检时间单位
    n_TaskGenerateModel: Number, // 巡检任务生成模式
    L_AnalysisUnitId: Number, // 风险分析单元
}
export default defineComponent( {
    name: 'basics-deploy',
    components: {},
    props: {
        basInfo: {
            type: String,
            default: ''
        },
        preType: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const lineOptions = ref();
        const zoneOptions = ref();
        const typeOption = ref();
        const endType = ref(1);
        const patternVal = ref(1);
        const isShow = ref(false);
        const jobOptions = ref();
        const analyseOption = ref();
        const staticField = ref(1);
        const dataDisabled = ref(true);
        const inpDisabled = ref(true);
        /*** 是否有重复时间改变事件 */
        const staticFieldChange = (val: any) => {
            console.log(val,'val12')
            if(val === 1){
                inpDisabled.value = true;
                dataDisabled.value = true;
                state.ruleForm.isAppointEndDate = false;
                state.ruleForm.d_EndDate = '';
                state.ruleForm.n_RepetitionTimesEnd = '';
            }
            if(val === 2){
                inpDisabled.value = false;
                dataDisabled.value = true;
                state.ruleForm.isAppointEndDate = null;
                state.ruleForm.d_EndDate = '';
            }
            if(val === 3){
                inpDisabled.value = true;
                dataDisabled.value = false;
                state.ruleForm.isAppointEndDate = true;
                state.ruleForm.n_RepetitionTimesEnd = '';
            }
        }

        /*** 选择风险分析单元 */
        const analyseChange = (val: any) => {
            console.log(val,'val')
        }

        /*** 作业活动改变事件 */
        const jobChange = (val: any) => {
            console.log(val,'val')
        }

        /*** state 引用接口定义基础数据初始值 */
        const state = reactive < formType > ({
            ruleForm: {} as ruleFormType
        })

        /*** 基础验证 rules */
        const rules = reactive < FormRules > ({
            /*** 放置验证 */
            // l_JobApplyId: [
            //     { required: true, message: '请选择作业活动', trigger: 'change' },
            // ],
            // 选择路线
            l_IPPathId: [
				{ required: true, message: '请选择路线', trigger: 'change' },
			],
            // 计划名称
            v_Name: [
				{ required: true, message: '请输入计划名称', trigger: 'blur' },
			],
            // 巡检类型
            v_IPType: [
				{ required: true, message: '请选择巡检类型', trigger: 'change' },
			],
            // 开始日期
            d_StartDate: [
				{ required: true, message: '请选择开始日期', trigger: 'change' },
			],
            // 开始时间
            d_StartTime: [
				{ required: true, message: '请选择开始时间', trigger: 'change' },
			],
            // 结束时间
            d_EndTime: [
				{ required: true, message: '请选择结束时间', trigger: 'change' },
			],
            // 自动巡检分类
            n_IPClass: [
                { required: true, message: '请选择自动巡检分类', trigger: 'change' },
            ],
            // 巡检模式
            n_IPMode: [
                { required: true, message: '请选择巡检模式', trigger: 'change' },
            ],
            // 巡检周期值
            n_IPCycleVaule: [
                { required: true, message: '请输入巡检周期值', trigger: 'blur' },
            ],
            // 巡检时间单位
            n_IPCycleUint: [
                { required: true, message: '请选择巡检时间单位', trigger: 'change' },
            ],
            // 重复几次结束
            n_RepetitionTimesEnd: [
                { required: true, message: '请输入重复次数', trigger: 'blur' },
            ],
            // 风险分析单元
            L_AnalysisUnitId: [
                { required: true, message: '请选择风险分析单元', trigger: 'change' },
            ],
            // 工作日历
            n_WorkingCalendar: [
                { required: true, message: '请选择巡检时间单位', trigger: 'change' },
            ],
        })

        /*** 巡检路线改变事件 */
        const lineChange = (val: any) => {
            console.log(val,'val')
        } 

        /*** 风险分区选择事件 */
        const zoneChange = (val: any) => {
            console.log(val,'val')
        }

        /*** 自能巡检分类改变事件 */
        const classChange = (val: any) => {
            console.log(val,'val')
        }

        /*** 巡检时间单位改变事件 */
        const uintChange = (val: any) => {}

        /*** 巡检模式改变事件 */
        const modelChange = (val: any) => {
            if(val === 0){
                isShow.value = false;
                state.ruleForm.isAppointEndDate = true;
            }else{
                isShow.value = true;
                state.ruleForm.isAppointEndDate = false;
                state.ruleForm.d_EndDate = '';
                state.ruleForm.n_RepetitionTimesEnd = '';
                patternVal.value = 1;
            }
        }

        /*** 巡检结束类型选择事件 */
        const endTypeChange = (val: any) => {
            state.ruleForm.d_EndDate = '';
            state.ruleForm.n_RepetitionTimesEnd = '';
            if(val === 1) state.ruleForm.isAppointEndDate = false;
            if(val === 2) state.ruleForm.isAppointEndDate = true;
            // if(val === 0) state.ruleForm.isAppointEndDate = false;
            // if(val === 2) state.ruleForm.isAppointEndDate = true;
        }

        /*** 巡检时间改变事件 */
        const pollingChange = (val:any) => {
            state.ruleForm.d_StartTime = val[0];
            state.ruleForm.d_EndTime = val[1];
        }

        /*** 工作日历改变事件 */
        const calendarChange = (val: any) => {
            console.log(val,'val')
        }

        /*** 时间单位改变事件 */
        const timeUnitChange = (val:any) => {}

        /*** 巡检任务生成模式 */
        const patternChange = (val: any) => {
            state.ruleForm.n_TaskGenerateModel = val;
        }

        /*** getApiFun 获取公用数据 */
        const getApiFun = async() => {
            // 巡检线路 下拉列表
            let ras: any = await SMSIPPathList({isUse: true});
            // 风险分区 下拉列表
            let rbs: any = await SMSDCRiskPartitionList({});
            // 巡检类型
            let rcs: any = await sysDictDataList({TypeCode: 'pollingType'});
            // 获取风险分区单元
            let rds: any = await SMSDCAnalysisUnitList({N_Type: 1});
            if(ras.success) lineOptions.value = ras.data;
            if(rbs.success) zoneOptions.value = rbs.data;
            if(rcs.success) typeOption.value = rcs.data;
            if(rds.success) analyseOption.value = rds.data;
            // 作业活动列表
            if(props.preType === 'job'){
                let param: any = {};
                param.n_FlowinstanceState = 2;
                let res: any = await SMSJOBApplyList(param);
                if(res.success) jobOptions.value = res.data;
            }
        }

        onMounted(() => {
            nextTick(() => {
                getApiFun();
                state.ruleForm.isAppointEndDate = false;
                if(props.basInfo !== ''){
                    let basInfo = JSON.parse(props.basInfo)
                    if(basInfo.isAppointEndDate === true) endType.value = 0;
                    if(basInfo.n_RepetitionTimesEnd) endType.value = 1;
                    patternVal.value = basInfo.n_TaskGenerateModel;
                    state.ruleForm = basInfo;
                }else{
                    if(props.preType === 'equ') state.ruleForm.n_IPClass = 0;
                    else state.ruleForm.n_IPClass = 1;
                    state.ruleForm.n_TaskGenerateModel = 1;
                    patternVal.value = 1;

                }
            })
        })
        
        /*** 监听 ruleForm 的变化 */
        watch(() => state.ruleForm,(newVal: any) => {
            // console.log(newVal,'newVal')
            // setTimeout(() => {
            //     ctx.emit(newVal);
            // },1000);
        })

        return {
            ruleFormRef,
            titleCon,
            ...toRefs(state),
            rules,
            lineChange,
            lineOptions,
            zoneOptions,
            zoneChange,
            classOption: [
                {label: '设备类', value: 0},
                {label: '作业活动类', value: 1},
            ],
            classChange,
            typeOption,
            modelOption: [
                {label: '单次不重复', value: 0},
                {label: '按小时', value: 1},
                {label: '按天', value: 2},
                // {label: '按周', value: 3},
                {label: '按月', value: 4},
                // {label: '按季', value: 5},
                // {label: '按年', value: 6},
            ],
            modelChange,
            uintChange,
            uintOption: [
                // {label: '分钟', value: 0},
                {label: '小时', value: 1},
                {label: '天', value: 2},
                // {label: '周', value: 3},
                {label: '月', value: 4},
                // {label: '季', value: 5},
                // {label: '年', value: 6},
            ],
            endTypeChange,
            endType,
            pollingChange,
            calendarChange,
            calendarOption: [
                {label: '每天', value: 0},
                {label: '工作日', value: 1},
                {label: '非工作日', value: 2},
            ],
            timeUnitChange,
            timeUnitOption: [
                {label: '分钟', value: 0},
                {label: '小时', value: 1},
                // {label: '天', value: 2},
                // {label: '周', value: 3},
                // {label: '月', value: 4},
                // {label: '季', value: 5},
                // {label: '年', value: 6},
            ],
            patternOption: [
                {label: '自动', value: 1},
                {label: '手动', value: 0},
            ],
            patternVal,
            patternChange,
            isShow,
            jobChange,
            jobOptions,
            analyseOption,
            analyseChange,
            staticField,
            staticFieldChange,
            dataDisabled,
            inpDisabled,
        }
    },
} )
</script>
<style scoped lang="scss">
#basics-deploy{
    max-height: 60vh;
    overflow-y: auto;
    margin: 40px auto 0px auto;
    width: 90%;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
}
:deep(.el-cascader){
    width: 100%!important;
}
:deep(.el-select){
    width: 100%!important;
}
:deep(.el-input){
    width: 100%!important;
}
:deep(.el-form-item__content){
    :deep(.el-input){
        width: 100%!important;
    }
}
</style>